<template>
  <div id="app" @scroll="handleScroll">
    <header>
<!--      <HeaderComponent/>-->
      <head/>
    </header>
    <main>
      <router-view/>
    </main>
    <FloatingButtons :showBackTop="showBackTop"/>
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import HeaderComponent from '@/components/HeaderComponent/HeaderComponent.vue';
import head from '@/components/layout/header.vue';
import FloatingButtons from "@/components/FloatingButtons/FloatingButtons.vue"; // 导入子组件

const showBackTop = ref(false);

// Handle scroll events to toggle the back-to-top button
const handleScroll = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  showBackTop.value = scrollTop > 100; // Adjust the value as needed
};

// Add and remove event listeners
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

header {
  margin: 0;
}

main {
  padding: 20px;
}
</style>
